(function () {
    // 通过目录跳转到某章节时避免顶部菜单遮挡

    const topbarHeight = document.querySelector(".topbar").getBoundingClientRect().height;
    const scrollTopMargin = 5;

    function scrollToShowElement(target) {
        const rect = target.getBoundingClientRect();
        const globalY = rect.top + window.scrollY;
        window.scrollTo(0, globalY - topbarHeight - scrollTopMargin);
    }

    const anchors = document.querySelectorAll(".menu-a");
    for (let a of anchors) {
        const target = document.querySelector(a.hash);
        a.onclick = function () {
            scrollToShowElement(target);
            return false;
        };
    }
})();


(function () {
    // 图片延迟加载

    const holders = document.querySelectorAll("article .img-placeholder");
    const observeOpt = {
        rootMargin: "100% 0% 100% 0%"
    };
    const holderObserver = new IntersectionObserver(function(entries) {
        for (let entry of entries) {
            if (entry.isIntersecting) {
                const holder = entry.target;
                const parent = holder.parentNode;
                const rect = holder.getBoundingClientRect();

                const img = new Image();
                img.width = rect.width;
                img.height = rect.height;
                parent.replaceChild(img, holder);

                img.src = holder.getAttribute("data-src");
                img.onload = function() {
                    img.classList.add("img-loaded");
                };
                holderObserver.unobserve(holder);
            }
        }
    }, observeOpt);
    for (let holder of holders) {
        holderObserver.observe(holder);
    }
})();

(function() {
    // 大屏幕时的章节目录逻辑

    const bookMenu = document.getElementById("book-menu-in-rail");
    const storage = window.sessionStorage;
    bookMenu.onscroll = function(e) {
        storage.setItem("scroll-pos-of-book-menu-in-rail", e.target.scrollTop);
    };
})();


(function() {
    // 大纲目录和章节目录都显示在左侧时的目录切换

    const StorageNameActiveSwitchMenuId = "active-switch-menu-id";
    const DataActive = "data-active";

    const items = document.querySelectorAll(".menu-switcher li");
    const menus = document.querySelectorAll(".menu-box > div");
    const storage = window.sessionStorage;

    // 只为书籍目录存储滚动位置
    const bookMenu = document.getElementById("book-menu-in-switch");
    bookMenu.onscroll = function(e) {
        storage.setItem("scroll-pos-of-book-menu-in-switch", e.target.scrollTop);
    }

    function toggleSwitcher(clickedItem) {
        for (let item of items) {
            if (item == clickedItem) {
                if (!item.hasAttribute(DataActive)) {
                    item.setAttribute(DataActive, "");
                }
            } else {
                item.removeAttribute(DataActive);
            }
        }
    }

    function toggleMenu(id) {
        for (let menu of menus) {
            if (menu.id == id) {
                menu.setAttribute(DataActive, "");
            } else {
                menu.removeAttribute(DataActive);
            }
        }
    }

    for (let item of items) {
        item.onclick = function() {
            const menuId = item.getAttribute("data-menu-id");
            toggleSwitcher(item);
            toggleMenu(menuId);
            storage.setItem(StorageNameActiveSwitchMenuId, menuId);
        };
    }
})();

(function() {
    // 大纲和章节目录全部隐藏时的目录逻辑

    const DataActive = "data-active";

    const bookMenu = document.getElementById("book-over-menu");
    const storage = window.sessionStorage;
    const bookMenuObserver = new IntersectionObserver(function(entries) {
        for (let entry of entries) {
            storage.setItem("book-over-menu-is-active", entry.isIntersecting);
        }
    });
    bookMenuObserver.observe(bookMenu);

    const bookMenuContent = document.getElementById("book-over-menu-content");
    bookMenuContent.onscroll = function(e) {
        storage.setItem("scroll-pos-of-book-over-menu-content", e.target.scrollTop);
    };

    const menuLayer = document.querySelector(".menu-layer");
    const menuLayerMask = document.querySelector(".menu-layer-mask");
    const menus = document.querySelectorAll(".menu-layer-menu");

    function hideAll() {
        for (let menu of menus) {
            menu.removeAttribute(DataActive);
        }
        menuLayer.removeAttribute(DataActive);
    };

    menuLayerMask.onclick = hideAll;

    const menuLayerObserver = new IntersectionObserver(function(entries) {
        for (let entry of entries) {
            if (!entry.isIntersecting) {
                hideAll();
                return;
            }
        }
    });
    menuLayerObserver.observe(menuLayer);

    function updateMenuLayer() {
        for (let menu of menus) {
            if (menu.hasAttribute(DataActive)) {
                if (!menuLayer.hasAttribute(DataActive)) {
                    menuLayer.setAttribute(DataActive, "");
                }
                return;
            }
        }
        menuLayer.removeAttribute(DataActive);
    }

    function toggleTo(target) {
        for (let menu of menus) {
            if (menu == target) {
                if (menu.hasAttribute(DataActive)) {
                    menu.removeAttribute(DataActive);
                } else {
                    menu.setAttribute(DataActive, "");
                }
            } else {
                menu.removeAttribute(DataActive);
            }
        }
        updateMenuLayer();
    }

    const toggles = document.querySelectorAll(".menu-toggles a");
    for (let toggle of toggles) {
        const target = document.getElementById(toggle.getAttribute("data-menu-id"));
        toggle.onclick = function() {
            toggleTo(target);
        };
    }
})();
